import React, { useState, useEffect } from 'react';
import { 
  Typography, Row, Col, Card, Button, Statistic, Tabs,
  Tag, Breadcrumb, Empty, Spin 
} from 'antd';
import { Link } from 'react-router-dom';
import { 
  ThunderboltOutlined, 
  ClockCircleOutlined,
  HistoryOutlined
} from '@ant-design/icons';

const { Title, Paragraph } = Typography;
const { TabPane } = Tabs;
const { Countdown } = Statistic;

// 模拟秒杀活动数据
const mockActivities = [
  {
    id: 1,
    name: '618电子产品大促',
    description: '年中大促，电子产品限时秒杀，错过等一年',
    startTime: new Date(Date.now() - 2 * 60 * 60 * 1000).toISOString(), // 2小时前开始
    endTime: new Date(Date.now() + 22 * 60 * 60 * 1000).toISOString(), // 22小时后结束
    status: 'active',
    banner: 'https://img01.71360.com/file/read/www/M00/4C/A3/wKj0iWTRBNWAGaRsAAWgzJ8SrKo845.jpg',
    products: [
      {
        id: 1,
        productId: 1,
        name: 'iPhone 13 Pro',
        originalPrice: 7999,
        seckillPrice: 6999,
        imageUrl: 'https://img01.71360.com/file/read/www/M00/4C/24/wKj0iWTLe2mALDSVAAF0enjwEQA837.jpg',
        stock: 50,
        limitPerUser: 1,
        sold: 30
      },
      {
        id: 2,
        productId: 6,
        name: 'Switch游戏机',
        originalPrice: 2099,
        seckillPrice: 1799,
        imageUrl: 'https://img01.71360.com/file/read/www/M00/4C/24/wKj0iWTLeviAFdHhAAErLFJZZsg037.jpg',
        stock: 100,
        limitPerUser: 1,
        sold: 60
      }
    ]
  },
  {
    id: 2,
    name: '新品首发特惠',
    description: '最新上市产品限时优惠',
    startTime: new Date(Date.now() + 2 * 24 * 60 * 60 * 1000).toISOString(), // 2天后开始
    endTime: new Date(Date.now() + 4 * 24 * 60 * 60 * 1000).toISOString(), // 4天后结束
    status: 'upcoming',
    banner: 'https://img01.71360.com/file/read/www/M00/4C/A4/wKj0iWTRBciAZE4sAAMcOqL_5Pg877.jpg',
    products: [
      {
        id: 3,
        productId: 5,
        name: 'iPad Air',
        originalPrice: 4799,
        seckillPrice: 4299,
        imageUrl: 'https://img01.71360.com/file/read/www/M00/4C/23/wKj0iWTLerqAHFU8AAFoT7tZJb4297.jpg',
        stock: 30,
        limitPerUser: 1,
        sold: 0
      },
      {
        id: 4,
        productId: 8,
        name: 'Apple Watch Series 7',
        originalPrice: 3199,
        seckillPrice: 2799,
        imageUrl: 'https://img01.71360.com/file/read/www/M00/4C/24/wKj0iWTLevSAQ6U3AAFZZzAuwUg396.jpg',
        stock: 50,
        limitPerUser: 1,
        sold: 0
      }
    ]
  },
  {
    id: 3,
    name: '5月数码大促',
    description: '数码产品折扣季',
    startTime: new Date(Date.now() - 10 * 24 * 60 * 60 * 1000).toISOString(), // 10天前开始
    endTime: new Date(Date.now() - 5 * 24 * 60 * 60 * 1000).toISOString(), // 5天前结束
    status: 'ended',
    banner: 'https://img01.71360.com/file/read/www/M00/4C/A3/wKj0iWTRBQuAYjZtAAIUwpCOQtE413.jpg',
    products: [
      {
        id: 5,
        productId: 3,
        name: '小米手环7',
        originalPrice: 249,
        seckillPrice: 199,
        imageUrl: 'https://img01.71360.com/file/read/www/M00/4D/59/wKj0iGTcxUmAQwAGAAF_rOyZvxw488.jpg',
        stock: 200,
        limitPerUser: 2,
        sold: 200
      }
    ]
  }
];

const SeckillPage: React.FC = () => {
  const [loading, setLoading] = useState(true);
  const [activities, setActivities] = useState<any[]>([]);
  const [activeTab, setActiveTab] = useState('active');

  useEffect(() => {
    // 模拟数据加载
    setLoading(true);
    setTimeout(() => {
      setActivities(mockActivities);
      setLoading(false);
    }, 500);
  }, []);

  const activeActivities = activities.filter(a => a.status === 'active');
  const upcomingActivities = activities.filter(a => a.status === 'upcoming');
  const endedActivities = activities.filter(a => a.status === 'ended');

  const handleTabChange = (key: string) => {
    setActiveTab(key);
  };

  const renderActivities = (activityList: any[]) => {
    if (activityList.length === 0) {
      return <Empty description="暂无秒杀活动" />;
    }

    return (
      <Row gutter={[16, 16]}>
        {activityList.map(activity => (
          <Col xs={24} key={activity.id}>
            <Card 
              hoverable
              cover={
                <img 
                  alt={activity.name} 
                  src={activity.banner} 
                  style={{ height: 200, objectFit: 'cover' }}
                />
              }
            >
              <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 16 }}>
                <Title level={4} style={{ margin: 0 }}>{activity.name}</Title>
                <Tag color={
                  activity.status === 'active' ? 'green' : 
                  activity.status === 'upcoming' ? 'blue' : 'red'
                }>
                  {activity.status === 'active' ? '进行中' : 
                   activity.status === 'upcoming' ? '即将开始' : '已结束'}
                </Tag>
              </div>
              
              <Paragraph>{activity.description}</Paragraph>
              
              <div style={{ marginBottom: 16 }}>
                {activity.status === 'active' && (
                  <div>
                    <ClockCircleOutlined /> 距结束: 
                    <Countdown 
                      value={new Date(activity.endTime).getTime()} 
                      format="D 天 H 时 m 分 s 秒"
                      style={{ marginLeft: 8 }}
                    />
                  </div>
                )}
                
                {activity.status === 'upcoming' && (
                  <div>
                    <ClockCircleOutlined /> 距开始: 
                    <Countdown 
                      value={new Date(activity.startTime).getTime()} 
                      format="D 天 H 时 m 分 s 秒"
                      style={{ marginLeft: 8 }}
                    />
                  </div>
                )}
              </div>
              
              <div style={{ display: 'flex', flexWrap: 'wrap', gap: '8px', marginBottom: 16 }}>
                {activity.products.slice(0, 3).map((product: any) => (
                  <Tag key={product.id}>
                    {product.name} ¥{product.seckillPrice}
                  </Tag>
                ))}
                {activity.products.length > 3 && (
                  <Tag>+{activity.products.length - 3}个商品</Tag>
                )}
              </div>
              
              <Button type="primary" danger>
                <Link to={`/seckill/${activity.id}`}>
                  {activity.status === 'active' ? '立即抢购' : 
                   activity.status === 'upcoming' ? '查看详情' : '查看回顾'}
                </Link>
              </Button>
            </Card>
          </Col>
        ))}
      </Row>
    );
  };

  if (loading) {
    return (
      <div style={{ textAlign: 'center', padding: '100px 0' }}>
        <Spin size="large" />
      </div>
    );
  }

  return (
    <div className="seckill-page">
      <Breadcrumb style={{ marginBottom: 16 }}>
        <Breadcrumb.Item>
          <Link to="/">首页</Link>
        </Breadcrumb.Item>
        <Breadcrumb.Item>秒杀活动</Breadcrumb.Item>
      </Breadcrumb>
      
      <Title level={2}>
        <ThunderboltOutlined style={{ color: '#ff4d4f' }} /> 秒杀活动
      </Title>
      <Paragraph>限时限量，超值优惠</Paragraph>
      
      <Tabs activeKey={activeTab} onChange={handleTabChange}>
        <TabPane 
          tab={
            <span>
              <ThunderboltOutlined />
              正在进行 ({activeActivities.length})
            </span>
          } 
          key="active"
        >
          {renderActivities(activeActivities)}
        </TabPane>
        <TabPane 
          tab={
            <span>
              <ClockCircleOutlined />
              即将开始 ({upcomingActivities.length})
            </span>
          } 
          key="upcoming"
        >
          {renderActivities(upcomingActivities)}
        </TabPane>
        <TabPane 
          tab={
            <span>
              <HistoryOutlined />
              已结束 ({endedActivities.length})
            </span>
          } 
          key="ended"
        >
          {renderActivities(endedActivities)}
        </TabPane>
      </Tabs>
    </div>
  );
};

export default SeckillPage; 